import React from 'react';
import { View, ImageBackground, Text, StyleSheet } from 'react-native';

const image = { uri: 'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20181226/97d5877e0ac1445980e755225514efc5.jpeg' }

const DemoImage = () => {
    return (
        <View style={styles.container}>
            {/* <Image style={{ width: 200, height: 200 }} source={require('./my-icon.png')} /> */}

            {/* Xcode 的 asset 类目中，或是放置在 Android 的 drawable 目录里）。注意此时只使用文件名，不带路径也不带后缀： */}
            {/* 对于放置在 Android 的 assets 目录中的图片，还可以使用asset:/ 前缀来引用： */}


            {/* <Image source={{ uri: 'assets:/test.jpg' }} style={{ width: 200, height: 200 }}></Image> */}
            {/* <Image source={{ uri: 'asset:/test.jpg' }} style={{ width: 40, height: 40 }} /> */}

            {/* 网络图片需要手动指定图片的尺寸 可以在 Image 组件的 source 属性中指定一些请求参数*/}
            {/* <Image source={{
                method: 'POST',
                uri: 'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20181226/97d5877e0ac1445980e755225514efc5.jpeg',
                headers: {
                    Pragma: 'no-cache',
                },
                body: 'Your Body goes here',
            }}
                style={{ width: 200, height: 200 }}>

            </Image> */}
            {/* Base64显示图片需要指定尺寸 建议仅对非常小的图片使用 base64 数据，比如一些小图标*/}
            {/* <Image style={{ width: 50, height: 50, resizeMode: 'contain' }} source={{ uri: '' }}></Image> */}

            
            <ImageBackground source={image} style={styles.image}>
                <Text style={styles.text}> Hello World</Text>
            </ImageBackground>

        </View >

    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "column"
    },
    image: {
        flex: 1,
        resizeMode: "cover",
        justifyContent: "center"
    },
    text: {
        color: "red",
        fontSize: 30,
        fontWeight: "bold"
    }
});

export default DemoImage


